<template>
    <transition name="view">
        <!-- 图片预览弹出层 -->
        <div class="photo-view" v-if="isView">
            <!-- 图片背景 -->
            <div class="bg"></div>
            <!-- 图片 -->
            <div class="viewer-photo">
                <img :src="require('../../static/'+photos[nowNumber]+'.jpg')" class="photo-img">
            </div>
            <!-- 左右按钮 -->
            <div class="switch sw-left" @click="changeNumber(0)" v-show="nowNumber > 0">
                <svg-icon icon="left"></svg-icon>
            </div>
            <div class="switch sw-right" @click="changeNumber(1)" v-show="nowNumber < photos.length - 1">
                <svg-icon icon="right"></svg-icon>
            </div>
        </div>
    </transition>
</template>

<script setup>

const props = defineProps({
    photos: {
        default: []
    },
    nowNumber: { // 第几张图片
        type: Number,
        default: 0,
    },
    isView: { // 是否预览
        default: false
    }
})

// 左右开关切换
const changeNumber = (e) => {
    emit('viewSwitch', e)
}
</script>

<style lang="less" scoped>
.view {

    // 入场
    &-enter {
        &-from {
            opacity: 0;
        }

        &-active {
            transition: all 0.2s ease-out;
        }

        &-to {
            opacity: 1;
        }
    }

    // 出场
    &-leave {
        &-from {
            opacity: 1;
        }

        &-active {
            transition: all 0.2s ease-in;
        }

        &-to {
            opacity: 0;
        }
    }
}

.photo-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid red;


    .bg {
        position: absolute;
        top: 0;
        left: 0;
        backdrop-filter: blur(20px);
        background: rgba(255, 255, 255, 0.9);
        height: 100%;
        width: 100%;
    }

    .viewer-photo {
        position: absolute;
        padding: 82px 454px 0 96px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        overflow-y: auto;
        display: flex;
        justify-content: center;

        img {
            max-width: 100%;
        }
    }

    .switch {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: @gray-2;
        color: @gray-10;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.5;
        transition: @tr;
        cursor: pointer;

        &:hover {
            opacity: 1;
        }


        .svg-icon {
            font-size: 24px;
        }
    }

    .sw-left {
        left: 20px;
    }

    .sw-right {
        right: 380px;
    }


}
</style>